/** Vue实例入口 */

<template>
  <div>

    <base-header/>

    <div class="container">
      <p>{{counter}}</p>
      <p>{{fullName}}</p>
      <p>{{defaultCount}}</p>
      <!-- <Todo></Todo> -->
      <transition name='fade'>
          <router-view/>
      </transition>
      <router-link to="/todo/1234">Todo</router-link>
      <router-link to="/login">login</router-link>
    </div>

    <!-- <notification content="test notification" /> -->

    <base-footer/>
    <!-- 命名视图 -->
    <!-- <router-view name="test"/> -->
  </div>
</template>

<script>
// import Todo from './page/Todo.vue'
import BaseHeader from './components/BaseHeader.vue'
import BaseFooter from './components/BaseFooter.vue'

import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

export default {
  name: "App",
  components: {
    // Todo,
    BaseHeader,
    BaseFooter
  },
  computed: {

    // count() {
    //   return this.$store.state.count
    // },

    // ...mapState(['count']),

    // ...mapState({
    //   counter: 'count'
    // }),
    ...mapState({
      counter: (state) => state.count,
      defaultCount: state => state.default.count
    }),
    // fullName() {
    //   return this.$store.getters.fullName
    // }
    ...mapGetters(['fullName'])
  },
  data () {
    return {
    };
  },
  mounted() {
    console.log('this is store object: ', this.$store)
    let i = 1
    setInterval(() => {
      // this.$store.commit('updateCount', i++)
      this.updateCount(i++)
      this['default/updateCount'](i++)
    }, 1000)
    // this.$store.dispatch('updateCountAsync', {
    //   num: 1,
    //   time: 1000
    // })
    this.updateCountAsync({
      num: 1,
      time: 1000
    })
  },
  methods: {
  ...mapActions(['updateCountAsync']),
  ...mapMutations(['updateCount', 'default/updateCount'])
}
}
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
</style>
